<template>
    <div class="write-blog">
        <nav class="head">
            <input class="markdown-title" type="text" placeholder="请输入文章标题" v-model="markdownTitle">

            <ul class="nav-list clear-float">
                <li style="position: relative;">
                    <div  @click.prevent="onRelease" click-outside-cancel>
                        <span class="iconfont icon-baocun" click-outside-cancel></span>
                        <div click-outside-cancel>发布</div>
                    </div>
                    <releaseFrame :releaseShow.sync="releaseShow" :textAreaValue="textAreaValue" :markdownTitle="markdownTitle" />
                </li>
                <li>
                    <div class="my">
                        <img style="width: 100%;" src="@/assets/images/my-img.png" alt="">
                    </div>
                </li>
                <li>
                    <span class="iconfont icon-bangzhu"></span>
                    <div>帮助</div>
                </li>
            </ul>
        </nav>
        <div class="write-con clear-float">
            <div class="resizer"></div>
            <div ref="left-write" class="write-item" >
                <editArea @keyUpValue="keyUpValue" />
            </div>
            <div class="resizer middle-resizer"></div>
            <div ref="right-write" class="write-item scroll" >
                <preview :textAreaValue.sync="textAreaValue" />
            </div>
            <div class="resizer"></div>
            <div class="write-item"></div>
        </div>
    </div>
</template>

<script>
import {cursorDrag} from '@/utils/cursorDrag.js'
import editArea from './edit/index'
import preview from './preview/index'
import releaseFrame from './releaseFrame/index'


export default {
    components: {
        editArea,
        preview,
        releaseFrame,
    },
    data() {
        return {
            textAreaValue: '',
            releaseShow: false,
            markdownTitle: '',
        }
    },
    created() {
        if (!this.isLogin) {
            this.$router.replace('/login')
        }
    },
    computed: {
        isLogin () {
            return this.$util.isLogin()
        }
    },
    mounted() {
        let This = this;
        let {$util} = this;
        // 3条黑边加固定宽
        let resizerWidth = 20 * 3 + 350;

        // 获取编辑区和预览去的宽 (百分比)
        // let width = ((1 - (resizerWidth / document.documentElement.clientWidth)) / 2) * 100;
        let width = (1 - (resizerWidth / document.documentElement.clientWidth)) * 100;
        let startX = null;
        // 保存窗口拖动时的宽（width）
        let resizeObj = null;

        // 初始默认宽（width）
        let leftWidth = width / 2;
        let rightWidth = width /2;

        // 保存当前拖动的宽（width）
        let old_L_w = leftWidth;
        let old_r_w = rightWidth;

        // 初始默认宽
        this.updateDom('left-write', leftWidth  + '%');
        this.updateDom('right-write', rightWidth  + '%');

        window.onresize = _ => {
            resizeObj = this.resizeFn(width, resizerWidth, old_L_w, old_r_w);
        }

        // 拖拽
        cursorDrag({
            el: '.middle-resizer',
            dowm(x, y) {
                startX = x;

                // 窗口改变时重新赋值
                width = (1 - (resizerWidth / document.documentElement.clientWidth)) * 100;
                if(resizeObj) {
                    const {L_W, R_W} = resizeObj;
                    leftWidth = L_W;
                    rightWidth = R_W;
                    resizeObj = null;
                }
            },
            moveFn(x, y) {
                // x轴 负数是向左划 正数是向右划
                // y轴 负数是向上划 正数是向下划
                x -= startX;

                // X轴移动百分比
                let percentageX = (Math.abs(x) / document.documentElement.clientWidth);

                // 实际的编辑区宽
                let left_W_X  = $util.toFixed_n((leftWidth - percentageX * 100), 4);
                // 实际的预览宽
                let right_W_X  = $util.toFixed_n((rightWidth - percentageX * 100), 4);

                // 边界判断
                let boundary_L = left_W_X <= 0.1 ? 0 : left_W_X;
                let boundary_R = right_W_X <= 0 ? 0 : right_W_X;

                if(x > 0) {// 向右移动（参考于鼠标按下坐标）
                    // 总宽 - 实际编辑区宽 = 预览宽
                    This.updateDom('left-write', (width - boundary_R) + '%');
                    // 实际编辑区宽
                    This.updateDom('right-write', boundary_R + '%');
                    old_L_w = width - boundary_R;
                    old_r_w = boundary_R;
                } else if(x < 0) {// 向左边移动（参考于鼠标按下坐标）
                    This.updateDom('left-write', boundary_L + '%');
                    This.updateDom('right-write', (width - boundary_L) + '%');
                    old_L_w = boundary_L;
                    old_r_w = width - boundary_L;
                }
            },
            endFn() {
                leftWidth = old_L_w;
                rightWidth = old_r_w;
            }
        });
    },

    methods: {
        // 更新dom
        updateDom(res, val) {
            this.$refs[res].style.width = val;

        },

        // 拖动浏览器窗口
        resizeFn(width, resizerWidth, old_L_w, old_r_w) {
            let This = this;
            let newWidth = ((1 - (resizerWidth / document.documentElement.clientWidth)) * 100) - width;
            if(newWidth > 0) {
                if(old_L_w <= 0) {
                    This.updateDom('left-write', old_L_w + '%');
                    This.updateDom('right-write', old_r_w + Math.abs(newWidth) + '%');
                    return {
                        L_W: old_L_w,
                        R_W: old_r_w + Math.abs(newWidth),
                    }
                } else if(old_r_w <= 0) {
                    This.updateDom('left-write', old_L_w + Math.abs(newWidth) + '%');
                    This.updateDom('right-write', old_r_w + '%');
                    return {
                        L_W: old_L_w + Math.abs(newWidth),
                        R_W: old_r_w,
                    }
                } else {
                    This.updateDom('left-write', (old_L_w + Math.abs(newWidth) / 2)  + '%');
                    This.updateDom('right-write', (old_r_w + Math.abs(newWidth) / 2 ) + '%');
                    return {
                        L_W: old_L_w + Math.abs(newWidth) / 2,
                        R_W: old_r_w + Math.abs(newWidth) / 2,
                    }
                }
            }else {
                if((old_L_w - Math.abs(newWidth) / 2) <= 0) {
                    This.updateDom('left-write', 0 + '%');
                    This.updateDom('right-write', old_r_w - Math.abs(newWidth) + '%');
                    return {
                        L_W: 0,
                        R_W: old_r_w - Math.abs(newWidth),
                    }
                } else if((old_r_w - Math.abs(newWidth) / 2 ) <= 0) {
                    This.updateDom('left-write', old_L_w - Math.abs(newWidth)  + '%');
                    This.updateDom('right-write', 0 + '%');
                    return {
                        L_W: old_L_w - Math.abs(newWidth),
                        R_W: 0,
                    }
                } else {
                    This.updateDom('left-write', (old_L_w - Math.abs(newWidth) / 2)  + '%');
                    This.updateDom('right-write', (old_r_w - Math.abs(newWidth) / 2 ) + '%');
                    return {
                        L_W: old_L_w - Math.abs(newWidth) / 2,
                        R_W: old_r_w - Math.abs(newWidth) / 2,
                    }
                }
            }
        },

        // 编辑区内容
        keyUpValue(val) {
            this.textAreaValue = val;
        },

        // 显示发布弹出框
        onRelease () {
            this.releaseShow = !this.releaseShow
        },

    },

}
</script>

<style scoped lang="scss">
    .write-blog {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    .head {
        display: flex;
        justify-content: space-between;
        align-items: center;

        padding: 5px 0;
        height: 54px;
        box-sizing: border-box;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #000;
        color: rgba(0, 0, 0, .75);

    }

    .markdown-title {
        padding-left: 20px;
        height: 100%;
        border: none;
        outline: none;
        font-size: 20px;
        font-weight: 700;

    }

    .nav-list {
        display: flex;
        justify-content: flex-end;
    }

    .nav-list > li {
        padding: 0 15px;
        cursor: pointer;
    }

    .nav-list > li .my {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid #ddd;
        transform: translateY(6px);
        overflow: hidden;
    }

     /*  */

    .write-con {
        display: flex;
    }

    .resizer {
        width: 18px;
        background-color: #333642;
        border-left: rgba(255, 255, 255, .05);
        border-right: rgba(0, 0, 0, .4);
        cursor: col-resize;
    }
    .resizer:first-child {
        cursor: default;
    }

    .write-item {
        /* float: left; */
        /* width: 40%; */
        /*text-align: left;*/
        /*overflow-y: scroll;*/
        /*padding: 10px 20px;*/
        height: calc(100vh - 54px); /* 减掉头部54px */
        border-right: 1px solid #ccc;
    }

    .write-item:last-child {
        width: 350px;
        max-width: 350px!important;
        border: none;
    }

    .scroll {
        padding: 10px;
        overflow: scroll;
        height: calc(100vh - 54px); /* 减掉头部54px */
    }

</style>
